/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Form, Input, Button, Carousel } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import './index.less'

class Login extends Component {
  onFinish = (values) => {
    console.log(values)
  }
  render() {
    return (
      <div className="login">
        {/* 左边轮播图 */}
        <div className="login-bgImg">
          <Carousel autoplay autoplaySpeed={1500}>
            <a
              href="#"
              onClick={() => {
                return false
              }}
              style={{
                display: 'inline-block',
                width: '100%',
                height: '100%',
              }}
            >
              <img
                src="../../../../../asset/\img/login.png"
                alt="上海鲜花港 - 郁金香"
                style={{
                  width: '100%',
                  height: '100%',
                  maxHeight: '100vh',
                  verticalAlign: 'middle',
                }}
              />
            </a>
            <a
              href="#"
              onClick={() => {
                return false
              }}
              style={{
                display: 'inline-block',
                width: '100%',
                height: '100%',
              }}
            >
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180930%2Ff69c162ca7254c2a9ddb95ceb0df5d50.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639300021&t=661c174f2d66ad3242dccb6ece1a6a63"
                alt="上海鲜花港 - 郁金香"
                style={{
                  width: '100%',
                  height: '100%',
                  maxHeight: '100vh',
                  verticalAlign: 'middle',
                }}
              />
            </a>
          </Carousel>
        </div>
        {/* 右边登录栏 */}
        <div className="login-body">
          <div className="login-header"></div>
          <Form
            name="normal_login"
            className="login-form"
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: 'Please input your Username!',
                },
              ]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="用户名"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: 'Please input your Password!',
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                登 录
              </Button>
              若无账号 <Link to="./register">立即注册!</Link>
            </Form.Item>
          </Form>
        </div>
      </div>
    )
  }
}

export default Login
